<template>
  <el-container>
    <!-- 侧导航栏 -->
    <el-aside width="200px">
      <el-row class="tac">
        <el-col>
          <h5 style="font-size: 18px; color: white; letter-spacing: 5px">车载管理全平台</h5>
          <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
            active-text-color="#ffd04b" :router="true">

            <!-- 工作台 -->
            <el-submenu index="SigningFee">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>工作台</span>
              </template>
              <!-- 审核管理 -->
              <el-submenu index="1">
                <template slot="title">审核管理</template>
                <el-menu-item index="13">选项1</el-menu-item>
              </el-submenu>
              <!-- 申述管理 -->
              <el-submenu index="2">
                <template slot="title">申述管理</template>
                <el-menu-item index="14">选项1</el-menu-item>
              </el-submenu>
              <!-- 广告签约管理 -->
              <el-submenu index="3">
                <template slot="title">广告签约管理</template>
                <el-menu-item-group>
                  <el-menu-item index="SigningFee">签约金结算</el-menu-item>
                  <el-menu-item index="VueSigningFeeNot">签约金结算-详情（未结算情况）</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <!-- 广告内容管理 -->
              <el-submenu index="4">
                <template slot="title">广告内容管理</template>
                <el-menu-item index="15">选项1</el-menu-item>
              </el-submenu>
              <!-- 活动内容管理 -->
              <el-submenu index="5">
                <template slot="title">活动内容管理</template>
                <el-menu-item index="16">选项1</el-menu-item>
              </el-submenu>
              <!-- 积分提现管理 -->
              <el-submenu index="6">
                <template slot="title">积分提现管理</template>
                <el-menu-item index="17">选项1</el-menu-item>
              </el-submenu>
            </el-submenu>

            <!-- 积分管理 -->
            <el-submenu index="7">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>积分管理</span>
              </template>

              <!-- 商户管理 -->
              <el-submenu index="8">
                <template slot="title">商户管理</template>
                <el-menu-item index="18">选项1</el-menu-item>
              </el-submenu>
              <!-- 商户管理 -->
              <el-submenu index="9">
                <template slot="title">商品积分</template>
                <el-menu-item index="19">选项1</el-menu-item>
              </el-submenu>
            </el-submenu>

            <!-- 用户管理 -->
            <el-submenu index="10">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>用户管理</span>
              </template>

              <!-- 车主档案 -->
              <el-submenu index="11">
                <template slot="title">车主档案</template>
                <el-menu-item index="20">选项1</el-menu-item>
              </el-submenu>
              <!-- 管理员档案 -->
              <el-submenu index="12">
                <template slot="title">管理员档案</template>
                <el-menu-item index="1-4-1">选项1</el-menu-item>
              </el-submenu>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-row>
    </el-aside>

    <el-container>
      <!-- 头部 -->
      <el-header>
        <div class="header-top">
          <div class="discribe">
            <el-breadcrumb style="height:60px;line-height: 60px">
              <el-breadcrumb-item :to="{ path: '/' }" style="padding: 0 0 0 20px;padding: 0"><span
                  style="font-weight: bold">首页 /
                  {{ $route.meta.title }}</span></el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="personal">
            <div>欢迎 <span style="color: #409eff;font-weight: bold">{{ msg }}</span> 登录</div>
            <div>
              <el-row class="block-col-2">
                <el-col :span="8">
                  <el-dropdown trigger="click">
                    <el-button type="warning" size="small" class="el-dropdown-link personCenter">
                      <i class="el-icon-setting"></i>
                      <span>个人中心</span>
                      <el-icon class="el-icon--right"><i class="iconfont icon-xiajiantou"></i></el-icon>
                    </el-button>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item>
                          <div @click="handleSetPassword">
                            <i class="el-icon-lock"></i>
                            <span style="font-size: 12px">修改密码</span>
                          </div>
                        </el-dropdown-item>
                        <el-dropdown-item>
                          <div @click="handleOut">
                            <i class="el-icon-switch-button"></i>
                            <span style="font-size: 12px">退出登录</span>
                          </div>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-header>
      <!-- 主体 -->
      <el-main>
        <router-view></router-view>
      </el-main>
      <!-- 尾部 -->
      <el-footer>
        <div class="Foot">欢迎来到车载管理全平台</div>
      </el-footer>
    </el-container>
  </el-container>
</template>

<script>

export default {
  data() {
    return {
      msg: '王兴盛'
    }
  },
  methods: {
    handleSetPassword() {
      this.$router.push({ path: 'SetPassword' })
    },
    handleOut() {
      this.$router.push({ path: '/login' });
      window.sessionStorage.clear();
    }
  }
}
</script>

<style>
body {
  margin: 0;
}
</style>

<style scoped>
.el-header {
  color: white;
  width: 100%;
  line-height: 60px;
  padding: 0;
}

.header-top {
  height: 58px;
  display: flex;
  padding: 0 20px;
  box-sizing: border-box;
  justify-content: space-between;
  border-bottom: 1px solid #d8d8d8;
}

.el-aside {
  background-color: #545c64;
  height: 99.8vh;
}

::v-deep(.el-menu-item) {
  text-align: left;
}

::v-deep(.el-submenu__title) {
  text-align: left;
}

::v-deep(.el-menu-vertical-demo) {
  border: none;
}

.personal {
  width: 300px;
  display: flex;
  justify-content: space-between;
  color: #545c64;
}

.el-footer {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: left;
  padding: 0;
}

.Foot {
  height: 58px;
  border-top: 1px solid #d8d8d8;
  text-indent: 20px;
}
::v-deep(.el-aside::-webkit-scrollbar){
    display: none;
  }
</style>
